<template>
  <el-drawer v-model="visibleDrawer" :destroy-on-close="true" :with-header="false" size="50%">
    <el-form>
      <!-- 班级名称 -->
      <el-form-item label="班级名称:" style="width:50%;">
        <el-input style="width:300px !important" v-model="formClassroom.classroomName" placeholder="请输入班级名称"></el-input>
      </el-form-item>

      <!-- 教师名称 -->
      <el-form-item label="班级类型:" style="width:50%;">
        <el-input style="width:300px !important" v-model="formClassroom.classroomType" placeholder="请输入班级名称"></el-input>
      </el-form-item>

      <el-form-item label="开课日期:">
        <el-date-picker style="width:300px !important" v-model="formClassroom.startDate" type="date"
          placeholder="请选择入职日期" format="YYYY-MM-DD"></el-date-picker>
      </el-form-item>

      <el-form-item label="状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态:">
        <el-radio-group v-model="formClassroom.status" :disabled="!formClassroom.classroomId">
          <el-radio :value="0">未发布</el-radio>
          <el-radio :value="1">报名中</el-radio>
          <el-radio :value="2">已开课</el-radio>
          <el-radio :value="3">已结业</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="简介:" style="width:100%;">
        <div class="quill-container">
          <QuillEditor v-model:content="formClassroom.bio" theme="snow" :options="editorOptions" contentType="html"
            style="height: 400px;" />
        </div>
      </el-form-item>


      <!-- 提交按钮 -->
      <el-form-item>
        <el-button class="classroom-button" type="primary" plain @click="onSubmit()">发布</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { addClassroomService, editClassroomService, getClassroomDetailService } from '@/apis/classroom'
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';

// 编辑器配置
const editorOptions = reactive({
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline'],
      [{ 'list': 'ordered' }, { 'list': 'bullet' }],
      ['link', 'image', 'video']
    ]
  }
})

const visibleDrawer = ref(false)
const formClassroom = reactive({
  classroomId: '',
  classroomName: '',
  classroomType: '',
  startDate: null,
  bio: '',
  status:''
})

async function open(classroomId) {
  visibleDrawer.value = true
  for (const key in formClassroom) {
    if (formClassroom.hasOwnProperty(key)) {
      formClassroom[key] = '';
    }
  }
  if (classroomId) {
    const classroomDetail = await getClassroomDetailService(classroomId)
    Object.assign(formClassroom, classroomDetail.data)
  } else {
    // 新增班级时，状态默认设置为未发布(0)
    formClassroom.status = 0
  }
}

defineExpose({
  open
})

function validate() {
  let msg = ''
  return msg
}

const emit = defineEmits(['success'])
async function onSubmit() {
  // 修复日期时区问题
  let formattedStartDate = '';
  if (formClassroom.startDate) {
    // 获取日期部分，避免时区影响
    const date = new Date(formClassroom.startDate);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    formattedStartDate = `${year}-${month}-${day}`;
  }
  
  formClassroom.startDate = formattedStartDate;

  const errorMessage = '';
  // const errorMessage = validate()
  if (errorMessage) {
    ElMessage.error(errorMessage);
    return false
  }
  const fd = new FormData()
  for (let key in formClassroom) {
    fd.append(key, formClassroom[key])
  }
  console.log(formClassroom)
  if (formClassroom.classroomId) {
    //编辑题目请求
    await editClassroomService(fd)
    ElMessage.success('编辑成功')
    emit('success', 'edit')
  } else {
    await addClassroomService(fd)
    ElMessage.success('添加成功')
    emit('success', 'add')
  }
  visibleDrawer.value = false
}


</script>

<style lang="scss">
.classroom-button {
  width: 200px;
}

/* 自定义单选按钮样式 */
:deep(.el-radio__input.is-checked .el-radio__inner) {
  border-color: #409EFF;
  background: #409EFF;
}

:deep(.el-radio__input.is-checked + .el-radio__label) {
  color: #409EFF;
}
</style>